<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>标题</span>
            </div>
        </template>
        <div>
            <el-table :data="tableData" border @current-change="currentChange" @selection-change="selectionChange"
                style="width: 100%">
                <el-table-column label="选择" width="100" align="center">
                    <template #default="scope">
                        <el-radio v-model="radio" :label="scope.row.name">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column type="selection" width="280" />
                <el-table-column prop="name" label="姓名" width="280" sortable />
                <el-table-column prop="city" label="城市" width="180" />
                <el-table-column prop="age" label="年龄" />
                <el-table-column prop="age" label="操作" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="onSubmit">选中行</el-button>
            </div>
        </div>

        <!--分页-->
        <div class="demo-pagination-block">
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                size="small"  background layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </el-card>
</template>

<script>
export default {
    name: "vueC",
    data () {
        return {
            tableData: [
                {
                    name: "张三",
                    city: "北京",
                    age: "28",
                },
                {
                    name: "李四",
                    city: "北京",
                    age: "28",
                },
                {
                    name: "王五",
                    city: "北京",
                    age: "28",
                },
            ],
            radio: "",
            checkbox: "",
            currentPage: 1, // 添加这一行来初始化 currentPage
            pageSize: 10, // 默认页码
            pageNum: 1, // 默认每页条数
            total: 100, // 总条数
        };
    },
    methods: {
        currentChange (val) {
            // val是当前行
            console.log("单选: ", val);
            this.radio = val.name;
        },
        selectionChange (val) {
            console.log("多选：", val);
            this.checkbox = val;
        },
        onSubmit () {
            console.log("单选: ", this.radio);
            console.log("多选：", this.checkbox);
        },
        // 编辑按钮
        handleEdit (index, row) {
            console.log(index, row);
        },
        // 删除按钮
        handleDelete (index, row) {
            console.log(index, row);
        },
        // 监听选择每页条目改变的事件
        handleSizeChange (newPageSize) {
            console.log(newPageSize);
            this.pageSize = newPageSize;
            console.log(this.pageNum, this.pageSize); // 实际提交后端API
        },
        // 监听页面改变的事件
        handleCurrentChange (newCurrentPage) {
            console.log(newCurrentPage);
            this.pageNum = newCurrentPage;
            console.log(this.pageNum, this.pageSize); // 实际提交后端API
        },
    },
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>